<template>
  <el-menu-item
    :index="routerInfo.name"
    :route="{ parameters: routerInfo.parameters }"
  >
    <template>
      <i :class="'el-icon-' + routerInfo.meta.icon"></i>
      <!--    <i class="icon-spot">·</i>-->
      <span v-if="routerInfo.meta.title.length < 10" slot="title">{{
        routerInfo.meta.title
      }}</span>
      <el-tooltip
        v-else
        effect="dark"
        :content="routerInfo.meta.title"
        placement="right"
        slot="title"
      >
        <span>{{ routerInfo.meta.title }}</span>
      </el-tooltip>
    </template>
  </el-menu-item>
</template>

<script>
export default {
  name: "MenuItem",
  props: {
    routerInfo: {
      default: function () {
        return null;
      },
      type: Object,
    },
  },
};
</script>
<style lang="scss">
.icon-spot {
  font-size: 22px;
  margin-right: 10px;
}
</style>
